<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;

        }

        .box {
            width: 1200px;
            height: 600px;
            border-radius: 100px 0 100px 0;
            /* background-color: aqua; */
        }

        .box1 {
            width: 1200px;
            height: 40px;
            /* background-color: #eee; */
        }

        .p1 {
            float: left;
            margin-left: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            line-height: 40px;
        }

        .p2 {
            float: right;
            margin-right: 20px;
            font-size: 14px;
            color: #999;
            line-height: 40px;
        }

        .p3 {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }

        .pt {
            font-weight: 700;
        }


        .box2 {
            width: 1200px;
            height: 560px;
            background-color: #fff;
            display: flex;
            /**/
            flex-wrap: wrap;
            justify-content: flex-start;
            /* background-color: pink; */
        }

        .imgbox1 {
            width: 200px;
            height: 250px;
            /* background-color: aqua; */
            margin: 20px;
            /* text-align: center; */
            background-color: #fffbfb;

        }

        .imgbox1 img {
            width: 100%;
            height: auto;
            display: block;
        }

        .imgbox1 p {
            margin: 10px 5px 10px 5px;
        }

        .imgbox1:hover {
            box-shadow: 0 0 10px #ccc;
            transform: translateY(-5px);
            cursor: pointer;
        }

        span {
            color: coral;
        }
    </style>
</head>

<body>
    <!-- <div class="box">
        <div class="box1">
            <p class="p1">精品推荐</p>
            <p class="p2">查看全部</p>
        </div>
        <div class="box2">
            <div class="imgbox1">
                <img src="../images/course01.png" alt="">
                <p>Think PHP 5.0 博客系统实战项目演练</p>
                <p class="p3"><span>高级</span>-<span>1125</span> 人在学习</p>
            </div>

        </div>
    </div> -->
    <script>
        let data = [
            {
                src: '../images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                src: '../images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                src: '../images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                src: '../images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                src: '../images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                src: '../images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                src: '../images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                src: '../images/course08.png',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]
        document.write(`
        <div class="box">
        <div class="box1">
            <p class="p1">精品推荐</p>
            <p class="p2">查看全部</p>
        </div>
        <div class="box2">
            <div class="imgbox1">
                <img src="${data[0].src}" alt="">
                <p class="pt">${data[0].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[0].num}</span> 人在学习</p>
            </div>
            <div class="imgbox1">
                <img src="${data[1].src}" alt="">
                <p class="pt">${data[1].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[1].num}</span> 人在学习</p>
            </div>
            <div class="imgbox1">
                <img src="${data[2].src}" alt="">
                <p class="pt">${data[2].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[2].num}</span> 人在学习</p>
            </div>
            <div class="imgbox1">
                <img src="${data[3].src}" alt="">
                <p class="pt">${data[3].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[3].num}</span> 人在学习</p>
            </div>
            <div class="imgbox1">
                <img src="${data[4].src}" alt="">
                <p class="pt">${data[4].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[4].num}</span> 人在学习</p>
            </div>
            <div class="imgbox1">
                <img src="${data[5].src}" alt="">
                <p class="pt">${data[5].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[5].num}</span> 人在学习</p>
            </div>
            <div class="imgbox1">
                <img src="${data[6].src}" alt="">
                <p class="pt">${data[0].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[6].num}</span> 人在学习</p>
            </div>
            <div class="imgbox1">
                <img src="${data[7].src}" alt="">
                <p class="pt">${data[7].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[7].num}</span> 人在学习</p>
            </div>
            <div class="imgbox1">
                <img src="${data[3].src}" alt="">
                <p class="pt">${data[3].title}</p>
                <p class="p3"><span>高级</span>-<span>${data[3].num}</span> 人在学习</p>
            </div>
        </div>
        </div>
        `)

    </script>
</body>

</html>